<template>
  <div class="admin-home">
    <h1>管理员首页</h1>
    <p>欢迎来到管理后台系统</p>
    <div class="reports-container">
      <div class="reports-content">
        <!-- 待办事项区域 -->
        <div class="report-section todo-section" style="width: 50%;">
          <div class="section-header">
            <h2>待办事项统计</h2>
          </div>
          <div class="stats-container">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="stat-card">
                  <div class="stat-value">{{ pendingConfirmationCount }}</div>
                  <div class="stat-label">待确认工单</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="stat-card">
                  <div class="stat-value">{{ pendingSettlementCount }}</div>
                  <div class="stat-label">待结算工单</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="stat-card">
                  <div class="stat-value">{{ pendingReviewCount }}</div>
                  <div class="stat-label">待评价工单</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="stat-card">
                  <div class="stat-value">{{ inProgressCount }}</div>
                  <div class="stat-label">进行中工单</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="stat-card">
                  <div class="stat-value">{{ assignedCount }}</div>
                  <div class="stat-label">指派工单</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="stat-card">
                  <div class="stat-value">{{ autoAssignedCount }}</div>
                  <div class="stat-label">自动分配工单</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        
        <!-- 数据统计区域 -->
        <div class="report-section data-section" style="width: 50%;">
          <div class="section-header">
            <h2>数据统计</h2>
          </div>
          <div class="stats-container">
            <div class="stats-overview">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="stat-card">
                    <div class="stat-value">{{ totalCustomersCount }}</div>
                    <div class="stat-label">总用户数</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="stat-card">
                    <div class="stat-value">{{ totalOrdersCount }}</div>
                    <div class="stat-label">订单总数</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="stat-card">
                    <div class="stat-value">{{ totalSuppliersCount }}</div>
                    <div class="stat-label">供应商数</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="stat-card">
                    <div class="stat-value">45</div>
                    <div class="stat-label">待处理任务</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWorkOrderListAPI } from '@/apis/order'
import { getCustomerInfoAPI } from '@/apis/user'
import { getAllValidSuppliersAPI } from '@/apis/supplier'

export default {
  name: 'AdminHome',
  data() {
    return {
      workOrderList: [],
      customerList: [],
      supplierList: [],
      todoList: [
        {
          id: 'T001',
          title: '审核新用户注册申请',
          assignee: 'admin',
          priority: '高',
          status: '待处理',
          createTime: '2023-09-01 10:30:00',
          dueDate: '2023-09-02 18:00:00'
        },
        {
          id: 'T002',
          title: '处理客户投诉工单',
          assignee: 'zhangsan',
          priority: '中',
          status: '进行中',
          createTime: '2023-08-30 14:20:00',
          dueDate: '2023-09-05 17:00:00'
        },
        {
          id: 'T003',
          title: '更新产品价格信息',
          assignee: 'lisi',
          priority: '低',
          status: '待处理',
          createTime: '2023-08-28 09:15:00',
          dueDate: '2023-09-10 17:00:00'
        },
        {
          id: 'T004',
          title: '供应商资质审核',
          assignee: 'admin',
          priority: '高',
          status: '已完成',
          createTime: '2023-08-25 11:30:00',
          dueDate: '2023-08-30 18:00:00'
        }
      ]
    }
  },
  computed: {
    // 待确认工单（工单状态为0，即待分配）
    pendingConfirmationCount() {
      return this.workOrderList.filter(order => order.status === 0).length
    },
    // 待结算工单（工单状态为2，即已完成；并且支付状态为0，即未支付）
    pendingSettlementCount() {
      return this.workOrderList.filter(order => order.status === 2 && order.payStatus === 0).length
    },
    // 待评价工单（工单状态为2，即已完成）
    pendingReviewCount() {
      return this.workOrderList.filter(order => order.status === 2).length
    },
    // 进行中工单（工单状态为1，即处理中）
    inProgressCount() {
      return this.workOrderList.filter(order => order.status === 1).length
    },
    // 指派工单和自动分配工单暂时保留原值，因为没有明确的计算逻辑
    assignedCount() {
      return 8
    },
    autoAssignedCount() {
      return 5
    },
    // 订单总数
    totalOrdersCount() {
      return this.workOrderList.length
    },
    // 客户总数
    totalCustomersCount() {
      return this.customerList.length
    },
    // 供应商总数
    totalSuppliersCount() {
      return this.supplierList.length
    }
  },
  mounted() {
    this.fetchWorkOrderList()
    this.fetchCustomerList()
    this.fetchSupplierList()
  },
  methods: {
    async fetchWorkOrderList() {
      try {
        const res = await getWorkOrderListAPI()
        if (res.code === 0) {
          this.workOrderList = res.data.map(item => {
            return {
              id: item.id,
              title: item.title || '无标题',
              des: item.des || '无描述',
              name: item.name || '无联系人',
              phone: item.phone || '无联系电话',
              address: item.address || '无地址',
              payStatus: item.payStatus,
              status: item.status,
              pic: item.pic || '',
              productId: item.productId || '',
              dispatcherId: item.dispatcherId || '',
              employeeId: item.employeeId || '',
              type: item.type,
              createTime: item.createTime || new Date().toISOString(),
              updateTime: item.updateTime || new Date().toISOString()
            }
          })
        } else {
          console.error('获取工单列表失败:', res.msg || '未知错误')
        }
      } catch (error) {
        console.error('获取工单列表失败:', error)
      }
    },
    async fetchCustomerList() {
      try {
        const res = await getCustomerInfoAPI()
        if (res.code === 0) {
          // 过滤掉已删除的客户（deleted为1的记录）
          this.customerList = res.data.filter(customer => customer.deleted !== 1)
        } else {
          console.error('获取客户信息失败:', res.msg || '未知错误')
        }
      } catch (error) {
        console.error('获取客户信息失败:', error)
      }
    },
    async fetchSupplierList() {
      try {
        const res = await getAllValidSuppliersAPI()
        if (res.code === 0) {
          // 获取所有有效供应商（status为1的）
          this.supplierList = res.data.records.filter(supplier => supplier.status === 1)
        } else {
          console.error('获取供应商信息失败:', res.msg || '未知错误')
        }
      } catch (error) {
        console.error('获取供应商信息失败:', error)
      }
    },
    getPriorityType(priority) {
      switch (priority) {
        case '高':
          return 'danger'
        case '中':
          return 'warning'
        case '低':
          return 'success'
        default:
          return 'info'
      }
    },
    getStatusType(status) {
      switch (status) {
        case '待处理':
          return 'info'
        case '进行中':
          return 'warning'
        case '已完成':
          return 'success'
        default:
          return 'info'
      }
    },
    handleTodo(row) {
      console.log('处理任务:', row)
      // 这里可以添加处理逻辑
    }
  }
}
</script>

<style scoped>
.admin-home {
  padding: 20px;
}

.reports-container {
  margin-top: 20px;
  width: 100%;
}

.reports-content {
  display: flex;
  gap: 20px;
  width: 100%;
}

.report-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
}

.todo-section {
  flex: 1;
}

.data-section {
  flex: 1;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
  color: #2c3e50;
}

.more-link {
  color: #3498db;
  text-decoration: none;
  font-size: 14px;
}

.more-link:hover {
  text-decoration: underline;
}

.stats-container {
  margin-top: 20px;
}

.stats-overview {
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  margin-bottom: 20px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
  margin-bottom: 5px;
}

.stat-label {
  color: #2c3e50;
}

.table-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow-x: auto;
}

@media (max-width: 768px) {
  .reports-content {
    flex-direction: column;
  }
}
</style>